import React from 'react'
import { changeNav } from '../../../actions'
import { wxzhctGetList } from '../../../actions/smartDr.js'
import { connect } from 'react-redux'
import hhistory from '../../../history'
import { Modal, List, Switch, Toast, Button } from 'antd-mobile'
import CSSModules from 'react-css-modules'
import styles from './subProductInfo.less'
import { ajaxGet, ajaxPost } from 'wxAjaxUtil'

let productCode = "100009";
let subProduct = [];
let storeCode = '';
const alert = Modal.alert;
const Item = List.Item;
let selectData = {};
let switchState = true;

@CSSModules(styles, { allowMultiple: true })
class subProductInfo extends React.Component {

	constructor(props) {
		super(props);
		this.configModal = this.configModal.bind(this);
		this.itemConfig = this.itemConfig.bind(this);
		this.toRenew = this.toRenew.bind(this);
	}

	componentDidMount() {
		this.props.tochangeNav({
			title: "已开通业务详情"
		});
		this.props.wxzhctGetList(selectData);  //刷新数据
	}

	configModal(storeCode, url, title, flag) {
		var ctrl = this;
		alert(title, <SwitchConfig />, [
			{ text: '取消', onPress: () => console.log('cancel'), style: 'default' },
			{
				text: '确定', onPress: () => {
					let data = { 'storeInfo': [storeCode] };
					data[flag] = switchState ? 1 : 0;
					ajaxPost(url, data, 'wxApiPath').then((res) => {
						this.props.wxzhctGetList(selectData);  //刷新数据
					}, (res) => {
						Toast.fail('修改失败', 1);
					})
				}
			},
		])
	}

	//根据具体业务判断是跳转还是弹层
	itemConfig(item) {
		switch (item.productAlias) {
			case 'order':
				hhistory.push('/wxDcConfig/' + storeCode);
				break;
			case 'delivery':
				hhistory.push('/wxWsConfig/' + storeCode);
				break;
			case 'reserve':
				hhistory.push('/wxYdConfig/' + storeCode);
				break;
			case 'invoice':
				hhistory.push('/wxDzfpConfig/' + storeCode);
				break;
			case 'queue':
				this.configModal(storeCode, '/o2o/sly/conf/apply/zhct/queue', '排队设置', 'queueFlg');
				break;
			case 'onlinePay':
				this.configModal(storeCode, '/o2o/sly/conf/apply/zhct/onlinePay', '桌边付设置', 'onlinePayFlg');
				break;
			case 'xfPay':
				this.configModal(storeCode, '/o2o/sly/conf/apply/zhct/xfPay', '享付设置', 'xfPayFlg');
				break;
		}
		switchState = !!item.openFlag;
	}

	//立即续费
	toRenew(productCode, renewalProductCode, renewalStoreCode) {
		hhistory.push({
			pathname: '/renew',
			state: { productCode: productCode, renewalProductCode: renewalProductCode, renewalStoreCode: renewalStoreCode }
		});
	}

	render() {
		let { listData } = this.props;
		let ctrl = this;
		storeCode = this.props.params.storeCode;
		selectData = this.props.location.state.selectData;
		if (listData.detail && listData.detail.length > 0) {
			for (var i = 0; i < listData.detail.length; i++) {
				if (storeCode == listData.detail[i].storeCode) {
					subProduct = listData.detail[i].subProductInfo;
				}
			}
		}
		return (
			<div styleName="bodyWrap">
				<div styleName="top">
					<div styleName="left">
						<img src="http://tcsl-slyun-pic.oss-cn-beijing.aliyuncs.com/header/1503305597049.png&#13;&#10;" alt="icon" />
					</div>
					<div styleName="right">
						<span styleName="rightTitle">智慧餐厅</span>
						<span styleName="rightContent">正式账号 单店版</span>
					</div>
				</div>
				<div styleName="middle">
					<div styleName="mdtip" onClick={this.configModal}>配置业务信息</div>
					<div styleName="mdtitle">子业务：</div>
					<div styleName="mdcontentWrap">
						{
							subProduct.map(function (item, index) {
								if (item.remainDuration == '' || Number(item.remainDuration) > 30) {
									if (item.openFlag == 1) {
										return (
											<span key={index} styleName="subProWrapWill" onClick={() => ctrl.itemConfig(item)}>
												<span styleName="subProNameWill">{item.productName}</span>
											</span>
										)
									} else {
										return (
											<span key={index} styleName="subProWrapWillClose" onClick={() => ctrl.itemConfig(item)}>
												<span styleName="subProNameWillClose">{item.productName}</span>
											</span>
										)
									}
								} else if (Number(item.remainDuration) > 0 && Number(item.remainDuration) <= 30) {
									if (item.openFlag == 1) {
										return (
											<span key={index} styleName="subProWrapRemain" onClick={() => ctrl.itemConfig(item)}>
												<span styleName="subProNameRemain">{item.productName}</span>
												<span styleName="subProDateRemain">{item.remainDuration}天到期</span>
											</span>
										)
									} else {
										return (
											<span key={index} styleName="subProWrapClose" onClick={() => ctrl.itemConfig(item)}>
												<span styleName="subProNameClose">{item.productName}</span>
												<span styleName="subProDateClose">{item.remainDuration}天到期</span>
											</span>
										)
									}
								} else {
									if (item.openFlag == 1) {
										return (
											<span key={index} styleName="subProWrapOver" onClick={() => ctrl.itemConfig(item)}>
												<span styleName="subProNameOver">{item.productName}</span>
												<span styleName="subProDateOver">逾期{item.remainDuration}天</span>
											</span>
										)
									} else {
										return (
											<span key={index} styleName="subProWrapClose" onClick={() => ctrl.itemConfig(item)}>
												<span styleName="subProNameClose">{item.productName}</span>
												<span styleName="subProDateClose">逾期{item.remainDuration}天</span>
											</span>
										)
									}
								}
							})
						}
					</div>
				</div>
				<Button type="primary" className="xufeiBtn" onClick={() => this.toRenew(productCode, '', [storeCode])}>立即续费</Button>
			</div>
		)
	}
}

@CSSModules(styles, { allowMultiple: true })
class SwitchConfig extends React.Component {
	constructor(props) {
		super(props);
	}
	state = {
		isChecked: switchState
	}
	render() {
		return (
			<List>
				<Item extra={<Switch className="mySwitch" checked={this.state.isChecked} onClick={(v) => { switchState = !this.state.isChecked; this.setState({ isChecked: switchState }); }} />}></Item>
			</List>
		)
	}
}

const mapStateToProps = (state) => ({
	listData: state.wxSmartdrs.wxzhctListData
})
const mapDispatchToProps = (dispatch) => ({
	tochangeNav: navogj => dispatch(changeNav(navogj)),
	wxzhctGetList: selectData => dispatch(wxzhctGetList(selectData))
})

export default connect(mapStateToProps, mapDispatchToProps)(subProductInfo)